<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="2" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3">
              <v-icon color="lighten-1">mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="8">
            <div class="mt-3 text-truncate text-center">
              用户信息
            </div>
          </v-col>
          <v-col cols="2" class="text-right pr-0 pt-5">
            <v-menu offset-y>
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                    small
                    icon
                    v-bind="attrs"
                    v-on="on"
                >
                  <v-icon class="lighten-4">mdi-dots-vertical</v-icon>
                </v-btn>
              </template>
              <v-list dense>
                <v-list-item dense>
                  <v-list-item-title>举报</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>

    <v-container class="">
      <!--      头像等-->
      <v-row no-gutters class="px-3 mt-2">
        <v-col cols="4" class="text-center">
          <v-avatar size="85" color="grey lighten-3" @click="showImage(getAvatar,true)" >
            <v-img
                :src="getAvatar"
            />
          </v-avatar>
        </v-col>
        <v-col cols="8">
          <v-row>
            <v-col cols="8">
              <div class="text-h6 font-weight-bold text-truncate" >{{userInfo.nickname}}</div>
            </v-col>
            <v-col cols="4" class="pb-0 pt-3 text-right" v-show="userInfo.uid!==$store.state.uid">
              <v-btn
                  small
                  color="primary"
                  v-if="userSubscribed"
                  @click="cancelSubscribe"
              >
                已关注
              </v-btn>
              <v-btn
                  small
                  outlined
                  color="primary"
                  v-else
                  @click="doSubscribe"
              >
                <v-icon class="lighten-4 ma-0 pa-0" size="15">mdi-plus</v-icon>
                关注
              </v-btn>
            </v-col>
          </v-row>

          <div class="text-subtitle-2">{{userInfo.description}}</div>
          <div class="text-caption" v-if="userInfo.skinType">{{userInfo.skinType}}</div>
          <div class="text-caption" v-else>未进行肤质测试</div>
        </v-col>
      </v-row>
      <v-row no-gutters class="mt-2">
        <v-col cols="4" class="text-center">
          <div class="text-subtitle-2">ta关注的</div>
          <div class="text-subtitle-2 font-weight-bold">{{myNumberFormat(userInfo.subscribeCount)}}</div>
        </v-col>
        <v-col cols="4" class="text-center">
          <div class="text-subtitle-2">关注ta的</div>
          <div class="text-subtitle-2 font-weight-bold">{{myNumberFormat(userInfo.subscriberCount)}}</div>
        </v-col>
        <v-col cols="4" class="text-center">
          <div class="text-subtitle-2">ta的文章</div>
          <div class="text-subtitle-2 font-weight-bold">{{myNumberFormat(userInfo.articleCount)}}</div>
        </v-col>
      </v-row>
      <v-divider class="mt-3"></v-divider>
      <!--      三个大icon-->
      <v-row  class="mt-3">
        <v-col cols="4" class="text-center" @click="chooseIndex=1">
          <v-btn icon>
            <svg id="组_420" data-name="组 420" xmlns="http://www.w3.org/2000/svg" width="29.234" height="29.233" viewBox="0 0 29.234 29.233">
              <path id="路径_916" data-name="路径 916" d="M-1869.647,8705.169c-.911,0-1.754,5.249-1.754,5.249s-4.944-.3-5.179.571,4.241,2.916,4.241,2.916-2.562,5.771-1.889,6.384,4.581-3.929,4.581-3.929,3.771,4.543,4.492,3.929-1.61-6.384-1.61-6.384,5.218-2.045,4.97-2.916-5.963-.571-5.963-.571S-1868.736,8705.169-1869.647,8705.169Z" transform="translate(1883.911 -8697.931)" fill="#ebd8ff"/>
              <path id="路径_912" data-name="路径 912" d="M22.028,29.233a2.909,2.909,0,0,1-1.3-.345L14.6,25.707,8.441,28.882A2.681,2.681,0,0,1,5.5,28.651a3.031,3.031,0,0,1-1.1-2.894l1.26-6.788L.835,14.295a3.169,3.169,0,0,1-.751-2.982L.1,11.278A2.828,2.828,0,0,1,2.372,9.273L9.084,8.007,12.1,1.652A2.836,2.836,0,0,1,14.6,0,2.763,2.763,0,0,1,17.12,1.669l3,6.332L26.834,9.22a2.768,2.768,0,0,1,2.236,2.029,3.011,3.011,0,0,1-.7,3l-.018.018L23.54,18.969l1.216,6.8a2.976,2.976,0,0,1-1.087,2.871,2.526,2.526,0,0,1-1.637.591ZM14.6,23.313l6.431,3.338a1.336,1.336,0,0,0,.555.161.909.909,0,0,0,.6-.21l.029-.023A1.222,1.222,0,0,0,22.68,25.4l-1.3-7.235L26.5,13.155a1.245,1.245,0,0,0,.284-1.239l-.012-.044a1.067,1.067,0,0,0-.877-.792l-.029-.006-7.08-1.286L15.6,3.069a1.111,1.111,0,0,0-1-.649,1.163,1.163,0,0,0-1.017.687L10.42,9.787,3.3,11.132a1.122,1.122,0,0,0-.924.819A1.4,1.4,0,0,0,2.7,13.207l5.125,4.955L6.48,25.4a1.251,1.251,0,0,0,.462,1.175,1.093,1.093,0,0,0,1.163.085l.023-.015,6.478-3.335Z" transform="translate(0.023)" fill="#707070"/>
            </svg>
          </v-btn>
          <div class="subtitle-2">ta收藏的</div>
        </v-col>
        <v-col cols="4" class="text-center" @click="chooseIndex=2">
          <v-btn icon>
            <svg id="组_419" data-name="组 419" xmlns="http://www.w3.org/2000/svg" width="28.487" height="29.143" viewBox="0 0 28.487 29.143">
              <circle id="椭圆_97" data-name="椭圆 97" cx="6.088" cy="6.088" r="6.088" transform="translate(9.98 3.459)" fill="#ebd8ff"/>
              <path id="路径_913" data-name="路径 913" d="M49.1,34.146H44.789v4.3a.994.994,0,0,1-1.988,0v-4.3H38.5a.994.994,0,0,1,0-1.988h4.3v-4.3a.994.994,0,0,1,1.988,0v4.3h4.3a.994.994,0,0,1,0,1.988ZM35.518,27.522c-.183.2-.366,0-.663,0-4.978,0-11.256,4.772-11.256,10.425a.994.994,0,0,1-1,.988.979.979,0,0,1-.7-.288.993.993,0,0,1-.3-.7c0-4.67,3.9-9.965,9.4-11.639a8.178,8.178,0,0,1-4.1-7.4,8.611,8.611,0,1,1,8.614,8.611Zm0-15.234a6.623,6.623,0,1,0,6.623,6.623,6.631,6.631,0,0,0-6.623-6.623Zm0,0" transform="translate(-21.6 -10.3)" fill="#6e6e6e"/>
            </svg>
          </v-btn>
          <div class="subtitle-2">ta关注的</div>
        </v-col>
        <v-col cols="4" class="text-center" @click="chooseIndex=3">
          <v-btn icon>
            <svg id="组_417" data-name="组 417" xmlns="http://www.w3.org/2000/svg" width="29.049" height="29.089" viewBox="0 0 29.049 29.089">
              <rect id="矩形_339" data-name="矩形 339" width="14.864" height="8.175" transform="translate(6.689 7.432)" fill="#ebd8ff"/>
              <path id="路径_915" data-name="路径 915" d="M44.151,36.463H35.607v1.709h8.544V36.463Zm11.107-7.69H31.335a2.563,2.563,0,0,0-2.563,2.563V49.279a2.563,2.563,0,0,0,2.563,2.563s11.633-.03,11.6,0c5.126,1.5,7.684,6.514,8.906,5.981s.09-3.862.011-5.981c-.019-.01,3.406,0,3.406,0a2.563,2.563,0,0,0,2.563-2.563V31.336A2.563,2.563,0,0,0,55.258,28.773Zm.854,19.637a1.722,1.722,0,0,1-1.722,1.722s-4.559-.071-4.524,0c-.33.5.983,3.405.624,4.747-1.573-.56-2.79-3.679-7.194-4.747-.166-.022-11.093,0-11.093,0a1.722,1.722,0,0,1-1.722-1.722V32.2A1.722,1.722,0,0,1,32.2,30.482H54.39A1.722,1.722,0,0,1,56.113,32.2ZM35.607,44.152H50.986V42.444H35.607Z" transform="translate(-28.772 -28.773)" fill="#6e6e6e"/>
            </svg>
          </v-btn>
          <div class="subtitle-2">ta写过的</div>
        </v-col>
      </v-row>
    </v-container>
    <favourites v-if="chooseIndex===1" :from-uid="$route.params.uid"></favourites>
    <subscribes v-if="chooseIndex===2" :from-uid="$route.params.uid"></subscribes>
    <publications v-if="chooseIndex===3" :from-uid="$route.params.uid"></publications>

    <show-big-image :show="imgOverlay" @dismiss="imgOverlay=false" :src="imgSrc"></show-big-image>
  </v-main>
</template>

<script>
import Subscribes from "../components/Subscribes";
import Favourites from "../components/Favourites";
import Publications from "../components/Publications";
import ShowBigImage from "../components/ShowBigImage";
import {baseUrl, imgPrefixUrl} from "../myConfig";
import {simpleCopy,myNumberFormat} from "../util/util";

export default {
  name: "UserInfo",
  components: {Subscribes,Favourites,Publications,ShowBigImage},
  data:()=>({
    userInfo:{
      uid:'',
      nickname:'',
      description:'',
      skinType:'',
      avatar:'',
      articleCount:'',
      subscribeCount:'',
      subscriberCount:'',
    },

    userSubscribed: true,
    chooseIndex:0,

    imgOverlay:false,
    imgSrc:'',

  }),
  methods:{
    myNumberFormat,
    showImage(src,raw=false){
      if (!raw){
        src = baseUrl+imgPrefixUrl+src;
      }
      this.imgSrc = src;
      this.imgOverlay=true;
    },
    getUserInfo(){
      let data = {
        uid : this.$route.params.uid,
        fromUid:this.$store.state.uid
      }
      this.$http.post('user/getUser',data).then(res=>{
        let result = res.data[0]
        simpleCopy(result,this.userInfo)
        this.userSubscribed = !!result.subscribed
        if (result.skinType){
          this.userInfo.skinType = result.skinType.split('|').map(a=>a.split(':')[1]).join('|')
        }
      }).catch(res=>{
        this.$emit('toast',res.msg)
      })
    },
    doSubscribe(){
      let data = {
        fromUid:this.$store.state.uid,
        toUid:this.userInfo.uid,
      }
      this.$http.post('subscribe/doSubscribe', data).then(res => {
        this.userSubscribed = true
        this.$emit('toast','关注成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    cancelSubscribe(){
      let data = {
        fromUid:this.$store.state.uid,
        toUid:this.userInfo.uid,
      }
      this.$http.post('subscribe/cancelSubscribe', data).then(res => {
        this.userSubscribed = false
        this.$emit('toast','取消关注成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },

  },
  computed:{
    getAvatar(){
      if (this.userInfo.avatar){
        return baseUrl+imgPrefixUrl+this.userInfo.avatar
      }else{
        return ''
      }
    }
  },
  beforeMount() {
    this.getUserInfo()
  }
}
</script>

<style scoped>

</style>
